import React, { Component } from "react";
import './5.css';
export default class SlideCom extends Component {
  // 1. 声明状态
  state = {
    num: 1
  }

  render() {
    return ( 
      <div className="container">
        <div className="slider-wrapper">
          {/* 2. 使用状态 */}
          <img src={`/images/${this.state.num}.jpg`} alt="" width="100%" />
          <div onClick={this.prev} className="prev btn">&lt;</div>
          <div onClick={this.next} className="next btn">&gt;</div>
        </div>
      </div>
    );
  }

  // 3. 绑定事件 下一个按钮的单击事件
  next = () => {
    //获取当前的 num
    let {num} = this.state;
    //判断是否右侧越界
    if(num >= 5){
      num = 1;
    }else{
      num += 1;
    }
    //更新状态
    this.setState({
      num
    })
  }

  //上一个按钮的单击事件
  prev = () => {
    //获取当前的 num
    let {num} = this.state;
    //判断
    if(num <= 1){
      num = 5
    }else{
      num -= 1;
    }
    //更新状态
    this.setState({
      num
    })
  }
}
